<template>
  <div class="total_box">
    <m-header modile-title="练习" go-back="true"></m-header>
    <ul v-for="(pa,index) in pageUrl" :key="index">
      <li @click="$router.push(pa.url)">
        <span>{{pa.text}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  import mHeader from '../../../components/header'

  export default {
    name: "Total",
    data() {
      return {
        pageUrl:
          [
            {url: 'lianxi1', text: '新闻滚动,上拉弹窗,星级评定,图片预览,打开PDF'},
            {url: 'lianxi2', text: '展开收起，刷新验证码倒计时不影响'},
            {url: 'lianxi3', text: '列表形式单选,地址选择'},
            {url: 'lianxi4', text: '图片预览'},
            {url: 'lianxi5', text: '获取循环的输入框的值'},
            {url: 'lianxi6', text: '练习6'},
            {url: 'lianxi7', text: '仿select下拉菜单对应内容变化,图片上传'},
            {url: 'lianxi8', text: '图片预览，弹窗'},
            {url: 'lianxi9', text: '图片上传且预览'},
            {url: 'lianxi10', text: '循环绑定样式选中样式改变'},
            {url: 'lianxi11', text: 'vue-PDF预览'},
            {url: 'lianxi12', text: '评论'},
            {url: 'lianxi13', text: '获取当前时间，吸顶'},
            {url: 'lianxi14', text: '左侧选项卡'},
            {url: 'lianxi15', text: '画布（粒子动画）'},
            {url: 'lianxi16', text: 'Mint UI时间选择器'},
            {url: 'lianxi17', text: '点名器'},
            {url: 'lianxi18', text: '富文本'},
            {url: 'lianxi19', text: '简单的图灵'},
            {url: 'lianxi20', text: '扫码布局,单选'},
            {url: 'lianxi21', text: '仿单选'},
            {url: 'lianxi22', text: '多选（checkbox）&单选'},
            {url: 'lianxi23', text: '仿事务投票'},
            {url: 'lianxi24', text: '仿最新版选举投票'},
            {url: 'lianxi25', text: '仿最新版事务投票'},
            {url: 'lianxi26', text: '仿选举投票拆分选项'},
            {url: 'lianxi27', text: '练习27'},
            {url: 'lianxi28', text: '练习28'},
            {url: 'lianxi29', text: '练习29'},
            {url: 'lianxi30', text: '练习30'},
          ],
      }
    },
    components: {
      mHeader
    }
  }
</script>

<style scoped lang="scss">
  .total_box {
    padding-top: 60px;
    background-color: #fff;
    ul {
      width: 100%;
      padding: 10px;
      li {
        height: 60px;
        border-bottom: 1px solid #f2f2f2;
        span {
          line-height: 60px;
          font-size: 20px;
        }
      }
    }
  }
</style>
